<!--
 * @Description: Stay hungry，Stay foolish
 * @Author: ''
 * @Date: 2023-10-10 22:39:14
 * @LastEditTime: 2023-10-10 23:21:28
 * @LastEditors: ''
-->
<template>
  <table class="haloe-calendar-table haloe-calendar-table-year" cellspacing="0" cellpadding="0">
    <tbody>
      <tr v-for="(item, index) in chunkMonths" :key="index">
        <td v-for="month in item" :key="month.text" @click="handleCellClick(month)" @contextmenu.prevent="handleCellContextmenu(month)">
          <div
            class="haloe-calendar-table-day"
            :class="{ 'haloe-calendar-table-day-current': month.text === currentMonth }"
            :style="dayStyles"
            @click="handleClickDate(month.text)"
          >
            <div class="haloe-calendar-table-day-title">{{ month.month }}</div>
            <div class="haloe-calendar-table-day-slot">
              <slot :month="new Date(month.month)" :data="{ type: month.type + '-year', month: month.text, selected: month.text === currentMonth }" name="year"></slot>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
defineOptions({
  name: 'CalendarYear'
})

import dayjs from 'dayjs';
import chunk from 'lodash.chunk';
import {ref,computed,inject} from "vue"

const CalendarInstance=inject('CalendarInstance')
const props=defineProps({
  date: Object
})

const months =computed(()=> {
  let months = [];
  const firstMonth = dayjs(props.date.format('YYYY-01-01'));

  for (let i = 0; i < 12; i++) {
    const day = firstMonth.add(i, 'month');
    months.push({
      text: day.format('YYYY-MM'),
      month: CalendarInstance.locale.value.months[i],
      type: 'current'
    });
  }
  return months;
})

const chunkMonths=computed( ()=> {
  return chunk(months.value, 3);
})

const {cellHeight,handleChangeDate,onCellClick,onCellContextmenu}=CalendarInstance

const dayStyles=computed(()=> {
  let style = {};

  // if (CalendarInstance.cellHeight !== 100) {
  //   style.height = `${CalendarInstance.cellHeight}px`;
  // }
  if (cellHeight.value !== 100) {
    style.height = `${cellHeight.value}px`;
  }

  return style;
})

const currentMonth=computed( ()=> {
  return props.date.format('YYYY-MM');
})


const handleClickDate= (date)=> {
  // CalendarInstance.handleChangeDate(dayjs(date));
  handleChangeDate(dayjs(date));
}

const handleCellClick =(data)=> {
  // this.CalendarInstance.$emit('on-cell-click', data);
  onCellClick(data)
}
const handleCellContextmenu= (data)=> {
  // this.CalendarInstance.$emit('on-cell-contextmenu', data);
  onCellContextmenu(data)
}
</script>